<template>
  <el-row justify="end" class="mt20">
    <el-pagination
      v-model:current-page="page.current"
      v-model:page-size="page.size"
      :page-sizes="[10, 20, 50, 100]"
      :small="small"
      :background="background"
      :total="page.total"
      :layout="layout"
      @size-change="emit('pageChange')"
      @current-change="emit('pageChange')"
    />
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const emit = defineEmits(["pageChange"]);
// 注意：Props引用 的类型接口不支持外部ts文件导入，必须定义在sfc中。
interface IPage {
  current: number;
  size: number;
  total: number;
}
const props = withDefaults(
  defineProps<{
    page: IPage;
    small?: boolean; // 是否显示小型页码
    background?: boolean; // 是否显示背景
    layout?: string;
    pagerCount?: number; // 最多展示多少个页码按钮
    always?: boolean; // 0条时是否显示分页
  }>(),
  {
    small: false,
    background: true,
    layout: "total, sizes, prev, pager, next, jumper",
    pagerCount: 7,
    always: false,
  }
);
</script>
<style lang="scss" scoped></style>
